<template>
  <div>
    <!-- <h1>国内热点</h1> -->
    <ul class="list" v-show="show">
      <li v-for="(item, index) in arr" :key="item.id" @click="goDetail">
        <!-- 将数据的下标传递给二级路由  在二级路由中根据不同的下标查找对应的详情  路由传参  params传参 一种query传参 -->
        <router-link :to="`/guoneiredian/detail/${index}`">
          <p>{{ item.title }}</p>
          <!-- <p>{{ item.img }}</p> -->
          <img :src="item.img" alt="" srcset="" class="imgTest" />
        </router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
import arr from "../data/data";
export default {
  name: "",
  props: [""],
  data() {
    return {
      arr,
      show: true,
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {
    console.log(this.arr);
  },

  methods: {
    goDetail() {
      console.log("点击跳转页面");
      this.show = false;
    },
  },

  watch: {},
};
</script>
<style lang='less' scoped>
.list {
  li {
    display: flex;
    justify-content: space-around;
    img {
      width: 5rem;
      height: 2.6667rem;
    }
  }
}
</style>